<template>
  <a-modal :title="title"
           v-model="visible"
           destroyOnClose
           :maskClosable="false"
           :confirmLoading="confirmLoading"
           @ok="handleOk"
           width="600px">
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="ruleForm"
                    :model="form"
                    :rules="rules"
                    :label-col="{ span: 4 }"
                    :wrapper-col="{ span: 20 }">
        <a-form-model-item label="角色名称"
                           prop="roleName">
          <a-input v-model="form.roleName"
                   placeholder="请输入角色名称" />
        </a-form-model-item>
        <a-form-model-item label="权限字符"
                           prop="roleCode">
          <a-input v-model="form.roleCode"
                   placeholder="请输入权限字符" />
        </a-form-model-item>
        <a-form-model-item label="角色顺序"
                           prop="sortNo">
          <a-input-number id="inputNumber"
                          v-model="form.sortNo"
                          :min="1" />
        </a-form-model-item>
        <a-form-model-item label="菜单权限">
          <Tree ref="tree"
                :data="menuList"
                :visible="true"
                v-model="form.menuIds"
                :checkable="true"
                :treeVisible="false" />
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import Tree from '@/components/bidreview/TreeNoP'
export default {
  name: 'RoleModal',
  props: ['url'],
  components: { Tree },
  data () {
    return {
      list: [
        {
          title: 'Node1',
          value: '0-0',
          key: '0-0',
          disabled: true,
          children: [
            {
              title: 'Node2',
              value: '0-0-0',
              key: '0-0-0'
            }
          ]
        }
      ],
      title: '操作',
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      disableSubmit: false,
      form: {},
      rules: {
        roleName: [
          { required: true, message: '请填写角色名', trigger: 'blur' },
          { max: 32, message: '最大长度32字符', trigger: 'blur' }
        ],
        roleCode: [
          { required: true, message: '请填写权限字符', trigger: 'blur' },
          { max: 32, message: '最大长度32字符', trigger: 'blur' }
          // { validator: this.validRoleCode, trigger: 'blur' }
        ],
        sortNo: [
          { required: true, message: '请选择顺序', trigger: 'blur' }
        ]
      },
      menuList: [],
      parentIdList: [],
      childbol: true
    }
  },
  created () {
  },
  computed: {

  },
  watch: {

  },
  methods: {
    add () {
      this.visible = true
      this.title = '新增角色'
      this.form = {}
    },
    edit (record) {
      this.disabled = false
      this.visible = true
      this.title = '修改角色信息'
      this.confirmLoading = true
      this.$get(`${this.url.modalInfo}/${record.id}`).then(async res => {
        this.form = { ...res.data.role }
        this.form.menuIds = [...res.data.menuIds]
        // 根据projectId获取项目菜单
        await this.getMenuByProjectId()
        this.confirmLoading = false
      })
    },
    close () {
      this.$emit('close')
      this.visible = false
    },
    handleOk () {
      // 触发表单验证
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.confirmLoading = true
          let url = ''
          if (!this.form.id) {
            url = this.url.add
          } else {
            url = this.url.edit
          }
          this.$post(url, Object.assign(this.form, { status: '1' })).then(res => {
            if (this.isSuccess(res)) {
              this.confirmLoading = false
              this.$message.success('操作成功')
              this.$emit('ModalOk')
              this.close()
            } else {
              this.$message.error('操作失败')
              this.confirmLoading = false
            }
          }).catch(error => {
            console.log(error)
            this.confirmLoading = false
          })
        } else {
          return false
        }
      })
    },
    handleTreeCheck (value) {
    },
    setData (datas, newData) { // 遍历树
      if (!newData.length === 0) {
        newData = []
      }
      for (let i in datas) {
        newData.push({ title: '', key: '', value: '', children: [] })
        newData[i]['title'] = datas[i].meta.title
        newData[i]['key'] = datas[i].id
        newData[i]['value'] = datas[i].id
        if (datas[i].children) {
          this.setData(datas[i].children, newData[i].children)
        }
      }
    },
    // 根据projectId获取menu菜单
    getMenuByProjectId () {
      this.menuList = []
      return new Promise((resolve, reject) => {
        this.$post(this.$api.permission.menu.menu, {}).then(res => {
          if (this.isSuccess(res)) {
            this.setData(res.data.records, this.menuList)
            resolve(this.menuList)
          } else {
            this.$message.error('获取菜单失败')
            reject(res)
          }
        })
      })
    }
  },
  mounted () {
  }
}
</script>

<style scoped>
</style>
